<template>
    <ayjDialog ref="dialoRef" :title="'添加设备'" width="30%" @closeFun="editQtyCancel" :slotFooter="true" height="800">
        <div class="content">
            <el-form ref="formRef" :model="objectForm" :rules="rules" label-width="90px">
                <el-form-item label="关联云店:" class="mt20" prop="shopid_yd">
                    <el-select v-model="objectForm.shopid_yd" placeholder="请选择关联云店" style="width: 300px;">
                        <el-option :label="item.name" :value="item.id" v-for="(item, index) in yun_list"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备编号:" prop="devno">
                    <el-input v-model="objectForm.devno" placeholder="请输入设备编号" style="width: 300px;"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="flex_between">
                <div></div>
                <div>
                    <el-button @click="editQtyCancel" size="mini">取消</el-button>
                    <el-button type="primary" @click="editQtySure" size="mini">确定</el-button>
                </div>
            </div>
        </template>
    </ayjDialog>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onUnmounted, computed, onBeforeUnmount, defineProps, reactive } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
// 获取当前组件实例
const { proxy } = getCurrentInstance()

onMounted(() => {
    getYdlistFun()
})

const props = defineProps({
    data: {
        type: Object,
        default: () => { }
    }
})

const emit = defineEmits(['addBack'])

const objectForm = ref({
    devno: '',
    shopid_yd: '',
})

// 新增：表单校验规则
const rules = ref({
    devno: [
        { required: true, message: '请输入设备编号', trigger: 'blur' }
    ],
    shopid_yd: [
        { required: true, message: '请选择关联云店', trigger: 'change' }
    ]
})

const rowData = ref({})
watch(() => props.data, (newVal) => {
    if (newVal) {
        rowData.value = newVal
    }
}, { deep: true })

const dialoRef = ref(null)
const open = (row) => {
    dialoRef.value.open()
}

const close = () => {
    dialoRef.value.close()
}

// 新增：表单提交校验逻辑
const formRef = ref(null)
const editQtySure = () => {
    proxy.$refs.formRef.validate(async (valid) => {
        if (valid) {
            let params = {
                ...objectForm.value,
                act: 'add'
            }
            let res = await proxy.$api({ url: config.devset_save_del, data: params });
            if (res.status == 1) {
                proxy.$message({
                    message: '操作成功',
                    type: 'success'
                });
                emit('addBack', true)
            } else {
                proxy.$message({
                    message: res?.msg || '添加失败',
                    type: 'error'
                })
            }
        } else {
            return false
        }
    })
}


// 获取云店列表
const yun_list = ref([])
const getYdlistFun = async () => {
    let res = await proxy.$api({ url: config.YUN_SHOP_LS, data: {} });
    if (!res) return;
    if (res.status == 1 && res.data) {
        yun_list.value = res.data;
    }
}

const editQtyCancel = () => {
    objectForm.value = {
        devno: '',
        shopid_yd: '',
    }
    proxy.$refs.formRef.resetFields()
    close()
}

defineExpose({
    open, close
})

</script>

<style lang="scss" scoped>
.content {
    padding: 20px 0;
}
</style>